<template>
  <main>
    <el-dialog
        title="请选择投递的简历"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <div>
        <el-button @click="delivery(item.id)" v-for="(item,index) in resumeList" :key="item.id" size="mini">个人简历{{index+1}}</el-button>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>

    </el-dialog>
    <header>
      <div class="header-con">
        <div class="header-top">
          <p>{{recruitment.workName||'未填写'}}&nbsp;<span>{{recruitment.salary}}元</span></p>
          <button v-if="$store.getters['user/getUser'].uType=='student'" @click="selectResume">投递简历</button>
        </div>
        <div class="header-bot">
          <p>{{recruitment.address}}·{{recruitment.experience||'未填写'}}·{{recruitment.degree}}</p>
<!--          <div @click="isLove=!isLove" class="interestedIn">-->
<!--            <img v-if="isLove" src="@/assets/svg/love-red.svg" alt="">-->
<!--            <img v-else src="@/assets/svg/love-white.svg" alt="">-->
<!--            <p>{{isLove?'已感兴趣':'对这个职位感兴趣'}}</p>-->
<!--          </div>-->
        </div>

      </div>
    </header>
    <article>
      <!--  公司头像部分    -->
      <div id="art-top">
        <img :src="recruitment.image|setAvatar" alt="">
        <div class="art-top-msg">
          <p>{{recruitment.companyName}}</p>
          <div  style="display: flex;justify-content: space-between;color: rgb(159,163,175)">
            <p style="color: rgb(180,193,127);font-weight: 100">{{recruitment.workKind}}</p>
            <report :msg="recruitment" :type="'招聘'"></report>
          </div>

        </div>
      </div>

      <!--  职位描述-->
      <div id="describe">
        <div>
          <h4>职位描述</h4>
          <div class="describe-list">
            <p v-for="(item,index) in recruitment.duties">{{index+1}}、{{item.dutyExplain}}</p>
          </div>
          <h4>技能要求</h4>
          <div class="describe-list">
            <p v-for="(item,index) in recruitment.skills">{{index+1}}、{{item.skillExplain}}</p>
          </div>
          <h4>福利</h4>
          <div class="welfare">
            <span v-for="item in recruitment.treatment">{{item}}</span>
          </div>
          <h4>工商信息</h4>
          <div class="industrial-list">
            <p><span class="options">法人代表：</span>龙年生</p>
            <p><span class="options">成立时间：</span>2002-12-23</p>
          </div>
        </div>
        <div class="location">
          <h4>位置:{{recruitment.address}}</h4>
          <img :src="`https://restapi.amap.com/v3/staticmap?location=${companyLocation}&zoom=12&size=450*300&markers=mid,,A:${companyLocation}&key=7d77df4562932651ba9897b00c235bfb`" alt="">
        </div>
      </div>
    </article>
  </main>
</template>

<script>
// import {getRecUnit} from "@/api/recruitment"
import {getProvinces} from "@/api/map";
import talk from "@/views/Chat/room"
import axios from 'axios'
import Report from "@/components/content/Report";
import {getUnitRec, postDeliver} from "@/api/recruitment";
import {getResume} from "@/api/resume";
export default {
  name: "recDetails",
  components:{
    Report,
    talk
  },
  created() {
    this.id=this.$route.query.id
    this.init()
    this.getLocation()
  },
  data(){
    return{
      id:0,
      companyLocation:'',
      isLove:false,
      dialogVisible:false,
      recruitment:{},
      resumeList:[]
    }
  },
  methods:{
    init(){
      getUnitRec(this.id).then(res=>{
        console.log(res)
        this.recruitment=res.data.extend.recruitment
        this.recruitment.treatment=this.recruitment.treatment.split(',')
      })
    },
    delivery(id){
      let deliver={
        resumeId:id,
        recruitmentId:this.id,
      }
      postDeliver(deliver).then(res=>{
        this.$message.success(res.data.msg)
        this.dialogVisible=false
      })
    },
    getResumeList(){
      getResume(this.$store.getters["user/getUser"].uid).then(res=>{
        this.resumeList=res.data.extend.resumes
      })
    },
    getLocation(){
      //将结构化地理位置转换为经纬度坐标
      let url=`https://restapi.amap.com/v3/geocode/geo?address=${'湖南省湖南工业职业技术学院'}&key=7d77df4562932651ba9897b00c235bfb`
      axios.get(url).then(res=>{
        console.log(res)
        this.companyLocation=res.data.geocodes[0].location
        console.log(res.data.geocodes[0].location)
      })
    },
    selectResume(){
      this.dialogVisible=true
      this.getResumeList()
    },
    handleClose(){
      this.dialogVisible=false
    }
  }

}
</script>

<style scoped lang="stylus">
@keyframes start{
  0%{
    height 0
  }
  100%{
    height 100vh
  }
}
#main
  margin 0 auto
  width 100%
  animation start ease-out .2s
  background white
  & *
    margin 0
    padding 0
header
  width 100%
  height 100px
  display flex
  align-items center
  padding 5px
  box-sizing border-box
  background #43344c
  &
  p
    font-size 30px
    color white
    &>span
      color rgb(250,106,67)

.header-con
  position relative
  z-index 1
  width 100%
  height 100%
  display flex
  flex-direction column
  justify-content space-between
.header-top
  width 100%
  display flex
  justify-content space-between
  & button
    outline none
    border none
    background-color rgb(93,213,200)
    width 25%
    color white
    cursor pointer
    transition background-color .2s
    &:hover
      background-color: #a7a7a4;

article
  background white
  height 100vh
#art-top
  display flex
  padding 10px
  box-sizing border-box
  width 100%
  height 70px
  & img
    height 60px
    width 60px
    border-radius 50%
.art-top-msg
  margin 0 10px
  width 100%
  display flex
  flex-direction column
  justify-content space-around
  & p:first-child
    color rgb(66,74,94)
    font-weight 600

#describe
  width 100%
  box-sizing border-box
  display flex
  justify-content space-between
  padding 10px
  & h4
    text-decoration underline orange
    line-height 30px
.describe-list p
  font-size 15px
  color rgb(97,104,124)
  line-height 38px
.industrial-list p
  line-height 30px
  font-size 15px
.options
  color rgb(159,163,175)
.location>img
  width 400px
.welfare
  margin 5px 0
  & span
    margin-right 10px
    padding 2px
    font-size 13px
    background rgb(240,249,235)
    color rgb(103,194,58)
#talking
  position absolute
  left 30%
.header-bot
  display flex
  justify-content space-between
  &>p
    font-size 14px
    color gainsboro
.interestedIn
  cursor pointer
  display flex
  align-items center
  width 25%
  &>p
    font-size 10px
  &>img
    height 30px
    width 30px
</style>
